@import "../../styl/variable.styl"

.set-alarm-form
  position relative

  button
    position absolute
    right -60%
    bottom 0
    margin-left 0
    margin-right 0

.day-count
  background-color white
  font-size 24rpx
  display flex
  flex-direction row
  justify-content space-between
  flex-wrap wrap
  padding 30rpx

  .check-in-button
    font-size 32rpx
    line-height 2.25
    margin-left 0
    margin-right 0
    margin-bottom auto

    &.checked
      line-height 2

    &.success-button
      background-color $success-color
      color white
      font-size 28rpx
      line-height 2

  .big
    font-size 36rpx

  picker
    position relative

  .icon-calendar
    position absolute
    right 30rpx
    bottom 8rpx
    width 20rpx
    height 22rpx

.others
  border-top 1px solid $primary-color
  display flex
  flex-wrap wrap
  margin-top 20rpx
  padding-top 20rpx
  width 100%
  height 118rpx

  .icon-user
    width 27rpx
    height 30rpx
    margin-right 8rpx
    position relative
    top 4rpx

  .h3
    width 300rpx
    margin-bottom .5em

  .customers
    width 100%

  .customer
    width 56rpx
    height 56rpx
    border-radius 50%

    + .customer
      margin-left 15rpx

.intro
  display flex
  flex-direction column

  text
    margin-bottom 20rpx

  .link
    color $primary-color
    margin-left auto

.sign-up,
.signed
  text-align center
  width 100%

  button,
  .button
    width 640rpx
    height 64rpx
    font-size 28rpx
    line-height 64rpx

    + button
      margin-top .5em

.h2
  width 650rpx
  border-bottom 1rpx solid $primary-color
  padding-bottom 10rpx
  position relative
  text-indent 60rpx

.small-hints
  font-size 20rpx

.days
  display flex
  flex-wrap wrap
  padding 20rpx 0 10rpx

.day
  width 60rpx
  height 60rpx
  border 1rpx solid $primary-color
  border-radius 50%
  display flex
  justify-content center
  align-items center
  margin-left 39rpx

  &:nth-child(7n+1)
    margin-left 0

  &:nth-child(n+8)
    margin-top 39rpx

  &.status-2 //check-in,
    background-color $primary-color
    border 1px solid white
    color white
    font-weight bold
    box-shadow 2px 2px 4px rgba(0,0,0,.2)

  &.status-1 // miss
    background-color $secondary-color
    border none
    color white

    &:after
      width 4rpx
      height 4rpx
      background-color $secondary-color
      border white 2px solid

  &.status-0
    box-shadow 2px 2px 4px rgba(0,0,0,.2)

  &.disabled
    background-color #F0F0F0
    box-shadow none
    opacity .6

.quit
  padding 1.5em 0

radio-group
  border 1rpx solid #DDD
  border-radius 1em

  label
    padding .5em .5em .5em 2em

    + label
      border-top 1rpx solid #DDD

.share-modal
  .modal-body
    display flex
    flex-direction column
    width 539rpx
    height 638rpx
    padding-top 280rpx
    position relative

  image
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    z-index 0

  text
    position relative
    font-size 24rpx

  .h3
    background-color #ffc706
    border-radius 8rpx
    color #333
    font-size 32rpx
    line-height 1.5
    height 48rpx
    margin 0 30rpx 20rpx
    position relative
    text-align center

  .mx-30
    margin-left 30rpx
    margin-right 30rpx

  button
    background-color #f53b55
    border-radius 0
    color #ffc706
    margin auto 30rpx 30rpx

.ad-modal
  .modal-body
    width 540rpx
    height 640rpx

  image
    width 100%
    height 100%

.version
  color #CCC
  font-size 20rpx
  text-align center
  margin 20rpx 60rpx
  padding-top 20rpx
  border-top 1rpx solid #CCC
